<template>
  <div class="hosts_container">
    <!-- # 表格数据 -->
    <el-table v-loading="loading" element-loading-text="正在加载中" :data="systemList" style="width: 99%" stripe>
      <el-table-column label="序号" width="80" type="index" align="center" />

      <el-table-column label="主机名" width="180" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>主机名: {{ scope.row.hostname }}</p>
            <p>系统: {{ scope.row.versionDetail }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.hostname }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="系统版本" width="300" prop="version" />

      <el-table-column label="主机状态" width="180" align="center">
        <template slot-scope="scope">
          <el-row v-if="scope.row.state == '1'"><el-tag type="success">正常</el-tag></el-row>
          <el-row v-if="scope.row.state == '2'"><el-tag type="info">下线</el-tag></el-row>
        </template>
      </el-table-column>

      <el-table-column label="内存使用率" width="120">
        <template slot-scope="scope">
          {{ scope.row.memPer }}%
        </template>
      </el-table-column>

      <el-table-column label="cpu使用率" width="120">
        <template slot-scope="scope">
          {{ scope.row.cpuPer }}%
        </template>
      </el-table-column>

      <el-table-column label="Cpu型号" width="350" prop="cpuXh" />
      <el-table-column label="CUP核心数" width="100" prop="cpuCoreNum" />

      <el-table-column label="备注信息" width="240" prop="remark" />
      <el-table-column label="创建日期" width="250">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ formatDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="250" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            round
            plain
            @click="handleSsh(scope.row)"
          >SSH连接</el-button>

          <el-button
            v-permission="'duty:modify'"
            size="mini"
            type="primary"
            round
            plain
            @click="handleMore(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
      <template v-slot:empty>
        <div style="height: 200px;">
          <img src="../../assets/nodata.png" width="150" style="margin: 30px;">
        </div>
      </template>
    </el-table>

    <el-drawer title="主机详情" :visible.sync="drawer">
      <OverviewRow :style="{ maxHeight: '100vh', overflow: 'auto' }" :ip="ip" />
    </el-drawer>

    <!-- # 弹层 -->
    <el-dialog title="连接SSH" :visible.sync="dialogVisible" width="35%">
      <div>
        <el-form ref="formDateRef" label-position="right" label-width="120px" :model="formDate">
          <el-form-item label="用户名">
            <el-input v-model="formDate.username" placeholder="填写用户名" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input  v-model="formDate.password" type="password" placeholder="填写密码" show-password />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="verBtn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getSystem, sshLink } from '@/api/system'
import OverviewRow from './components/OverviewRow'
import { formatDate } from '@/utils/index.js'

export default {
  components: {
    OverviewRow
  },
  data() {
    return {
      ip: '1111',
      sshIp: '',
      systemList: [],
      formDate: {
        username: '',
        password: ''
      },
      loading: true,
      drawer: false,
      sshDrawer: false,
      dialogVisible: false
    }
  },
  mounted() {
    this.getSystem()
  },
  methods: {
    formatDate,
    async getSystem() {
      const res = await getSystem()
      console.log(res)
      this.systemList = res
      this.loading = false
    },
    handleMore(row) {
      console.log('ip', row.hostname)
      this.ip = row.hostname
      this.drawer = true
    },
    async handleSsh(row) {
      this.sshIp = row.ip
      // 打开弹层
      this.dialogVisible = true
    },
    // 取消按钮
    cancelBtn() {
      this.formDate.username = ''
      this.formDate.password = ''
      this.dialogVisible = false
    },
    // 确认按钮
    async verBtn() {
      this.dialogVisible = false
      // TODO 连接ssh
      this.sshLink(this.sshIp)
    },
    // 连接ssh
    async sshLink(ip) {
      const { username, password } = this.formDate
      // const res = await sshLink(ip, username, password)
      const sshURL = `http://127.0.0.1:9000/webSsh/page?ip=${ip}&username=${username}&password=${password}`
      window.open(sshURL, '_blank')
      this.formDate.username = ''
      this.formDate.password = ''
    }
  }
}
</script>
<style scoped>
.dialog-footer{
  display: flex;
  justify-content: center;
}
</style>
